<template>
  <view class="module-top-panel">
    <u-image :src="bgImageUrl||moduleBackgroundInfo.cover" width="375" :height="height"></u-image>

    <view class="content-panel">
      <view class="title-panel" :style="topNavStyle.style">
        <view class="icon-panel">
          <u-icon name="arrow-left" color="#fff" size="24" bold @click="toBack"></u-icon>

          <view style="margin-left:20rpx;">
            <u-icon name="home" color="#fff" size="24" bold @click="toIndex"></u-icon>
          </view>
        </view>

        <view class="title">{{title||moduleBackgroundInfo.title}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ModuleTopPanel',
    props: {
      title: {
        type: String,
        default: ''
      },
      module: {
        type: String,
        default: 'user'
      },
      bgImageUrl: {
        type: String,
        default: ''
      },
      height: {
        type: Number,
        default: 200
      },
      pageScrollTop: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {}
    },
    computed: {
      moduleBackgroundInfo() {
        const index = this.moduleBackgroundList.findIndex(el => el.module == this.module)

        if (index != -1) {
          return this.moduleBackgroundList[index]
        }
      },
      topNavStyle() {
        const r = this.pageScrollTop / 100;

        return {
          "style": `
						padding-top:${this.statusBarHeight}px;
						height:${this.menuButtonHeight}px;
						background-color: rgba(5, 205, 179,${r>=1?1:r});
					`
        }
      }
    },
    methods: {
      toBack() {
        uni.navigateBack({
          delta: 1
        })
      },
      toIndex() {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }
    }
  }
</script>

<style lang="scss">
  .module-top-panel {
    display: flex;
    justify-content: center;
    position: relative;

    .content-panel {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;

      .status_bar {
        width: 100%;
        height: var(--status-bar-height);
      }

      .title-panel {
        padding-bottom: 22rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        .icon-panel {
          position: absolute;
          left: 20rpx;
          display: flex;
          align-items: center;
        }

        .title {
          width: 350rpx;
          text-align: center;
          font-size: 38rpx;
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>